<template>
  <div class="map">
    <div id="container"></div>
  </div>
</template>

<script> 
import { mapActions, mapState } from "vuex";
import pic1 from "../../../mapIcon/marker.png";
// import './map'
export default {
  name: "Map",
  data() {
    return {
      zoom: 0,
      map: {},
      p1AddrssList: [
        { x: 108.972911, y: 34.230771 },
        { x: 108.979738, y: 34.225517 },
        { x: 108.982397, y: 34.222174 },
        { x: 108.965836, y: 34.225607 },
      ],
      p2AddrssList: [
        { x: 108.895585, y: 34.194947 },
        { x: 108.902197, y: 34.202711 },
        { x: 108.934679, y: 34.210952 },
        { x: 108.952789, y: 34.194352 },
        { x: 108.982397, y: 34.193395 },
        { x: 109.010712, y: 34.203427 },
        { x: 108.994327, y: 34.222413 },
        { x: 108.970755, y: 34.224204 },
      ],
      p2AddrssListColor: [
        {
          geometry: {
            type: "LineString",
            coordinates: [
              [108.895585, 34.194947],
              [108.902197, 34.202711],
              [108.934679, 34.210952],
              [108.952789, 34.194352],
              [108.982397, 34.193395],
              [109.010712, 34.203427],
              [108.994327, 34.222413],
              [108.970755, 34.224204],
            ],
          },
        },
      ],
    };
  },
  methods: {
    ...mapActions("gismanage", ["actionGetCoordLinat"]),
    createDOM(config) {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      var radius = 10;
      //创建构造函数Circle
      function Circle(x, y, radius) {
        this.xx = x; //在画布内随机生成x值
        this.yy = y;
        this.radius = radius;
      }
      Circle.prototype.radiu = function () {
        radius += 0.5; //每一帧半径增加0.5
        if (this.radius >= 20) {
          radius = 10;
        }
      };
      // 绘制圆形的方法
      Circle.prototype.paint = function () {
        context.beginPath();
        context.arc(this.xx, this.yy, 5, 0, Math.PI * 2);
        context.fillStyle = "rgba(220,20,60,1)"; //填充颜色,默认是黑色
        context.fill(); //画实心圆
        context.closePath();
        context.lineWidth = 2; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
        this.paintkong();
        this.paintkong(0);
        this.paintkong(5);
        this.paintkong(10);
      };
      Circle.prototype.paintkong = function (num) {
        context.beginPath();
        context.arc(this.xx, this.yy, this.radius + num, 0, Math.PI * 2);
        context.closePath();
        context.lineWidth = 1; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
      };
      var newfun = null;
      function createCircles() {
        newfun = new Circle(50, 50, radius); //调用构造函数
        newfun.paint();
        newfun.radiu();
      }
      canvas.width = 100; //
      canvas.height = 100;
      var width = 100,
        height = 100;
      var backCanvas = document.createElement("canvas"),
        backCtx = backCanvas.getContext("2d");
      backCanvas.width = width;
      backCanvas.height = height;
      //设置主canvas的绘制透明度
      context.globalAlpha = 0.7;
      //显示即将绘制的图像，忽略临时canvas中已存在的图像
      backCtx.globalCompositeOperation = "copy";
      let render = function () {
        //先将主canvas的图像缓存到临时canvas中
        backCtx.drawImage(canvas, 0, 0, width, height);
        //清除主canvas上的图像
        context.clearRect(0, 0, width, height);
        //在主canvas上画新圆
        createCircles();
        //新圆画完后，再把临时canvas的图像绘制回主canvas中
        context.drawImage(backCanvas, 0, 0, width, height);
      };
      setInterval(render, 100);
      return canvas;
    },
    getP1Point() {
      this.p1AddrssList.forEach((item) => {
        let poi = new BMapGL.Point(item.x, item.y);
        var customOverlay = new BMapGL.CustomOverlay(this.createDOM, {
          point: poi,
          offsetX: 0,
          offsetY: 0,
          minZoom: 13,
          maxZoom: 19,
          properties: {
            width: 50,
            height: 50,
            radius: 50,
            lineWidth: 20,
            data: 2,
          },
        });
        this.map.addOverlay(customOverlay);
      });
    },
    getP2Line() {
      let view = new mapvgl.View({
        map: this.map,
      });
      let listData = this.coordLinat;
      listData.forEach((item) => {
        console.log("item", item);
        let lineLayerRode = new mapvgl.LineLayer({
          style: "normal", // road, arrow, normal
          width: 4,
          color: "skyblue",
          enablePicked: true,
        });
        let lineLayer = new mapvgl.LineLayer({
          // style: "road", // road, arrow, normal
          width: 4,
          color: "blue",
          animation: true,
          duration: 0.5, // 循环时间2s
          trailLength: 0.9, // 拖尾长度占间隔的0.4
          interval: 0.2, // 粒子长度占线整体长度的0.2
          // enablePicked: true,
        });
        let newWaterRoadLine = [
          {
            geometry: {
              type: "LineString",
              coordinates: [
                // [108.895585, 34.194947],
                // [108.902197, 34.202711],
                // [108.934679, 34.210952],
                // [108.952789, 34.194352],
                // [108.982397, 34.193395],
                // [109.010712, 34.203427],
                // [108.994327, 34.222413],
                // [108.970755, 34.224204],
              ],
            },
          },
        ];
        newWaterRoadLine[0].geometry.coordinates = item.coordinates;
        console.log("newWaterRoadLine", newWaterRoadLine);
        lineLayer.setData(newWaterRoadLine);
        lineLayerRode.setData(newWaterRoadLine)
        view.addLayer(lineLayerRode)
        view.addLayer(lineLayer);

      });
      // let view = new mapvgl.View({
      //   map: this.map,
      // });
      // let lineLayer = new mapvgl.LineLayer({
      //   style: "road", // road, arrow, normal
      //   width: 10,
      //   color: "#70DB93",
      //   enablePicked: true,
      //   onClick: e => {
      //     console.log(e);
      //   }
      // });
      // lineLayer.setData(this.p2AddrssListColor);
      // view.addLayer(lineLayer);
    },
    listenZoomend() {
      let vthis = this;
      this.map.addEventListener("zoomend", function (e) {
        let zoomNum = e.srcElement.zoomLevel;
        vthis.zoom = zoomNum;
        if (Math.floor(zoomNum) == 17) {
          vthis.getP1Point();
          // alert('这是18级图层')
        }
        if (Math.floor(zoomNum) == 15) {
          //   vthis.getP2Line();
          // alert('这是15级图层')
        }
        // console.log(this.zoomLev)
        // console.log(123,e.srcElement.zoomLevel)
        // var ZoomNum = this.map.getZoom();
        // console.log(ZoomNum)
      });
    },
    getP3Window() {
      var marker = new BMapGL.Marker(new BMapGL.Point(108.934679, 34.210952));
      this.map.addOverlay(marker);
      var sContent = `
        <div style='width:190px;text-align: center;margin-top: 0px;'>天安门</div>
        <div style='color:white'><span>设备名称:<span/><span>管线<span/></div>
        <div style='color:white'><span>设备位置:<span/><span>雁塔区大寨路<span/></div>
        <div style='color:white'><span>所属线路:<span/><span>管线运营一号线<span/></div>
        <div style='color:white'><span>故障率:<span/><span>20%<span/></div>
        <div style='color:white'><span>数据更新时间:<span/><span>2023-03-21 11:50<span/></div>
        <div style='width:190px;height:120px'><img id='imgDemo' style='height:100%;width:100%' src="./assets/R-C.png" alt=""></div>
      `;
      var infoWindow = new BMapGL.InfoWindow(sContent);
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
        var dom = document.getElementById("imgDemo");
        console.log("dom", dom);
        dom.onload = function () {
          infoWindow.redraw();
        };
      });
    },
  },
  watch: {
    zoom: {
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
      },
    },
  },
  computed: {
    ...mapState("gismanage", ["coordLinat"]),
  },
  async mounted() {
    (this.map = new BMapGL.Map("container")), console.log(this.map);
    var point = new BMapGL.Point(114.673864, 35.183726);
    this.map.centerAndZoom(point, 13);
    this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    await this.actionGetCoordLinat();
    // this.getP1Point();
    await this.getP2Line();
    // this.getP3Window()
    // this.listenZoomend();
  },
};
</script>

<style lang="less" scoped>
::v-deep .BMap_bubble_pop {
  background-color: rgba(24, 76, 86, 0.8) !important;
  width: 190px !important;
}
::v-deep .BMap_bubble_top {
  width: 190px !important;
  padding: 0 !important;
}
::v-deep .BMap_bubble_center {
  display: flex;
  flex-direction: column;
}
.map {
  height: 100%;
  width: 48%;
  border-radius: 10px;
  overflow: hidden;
}
.map #container {
  height: 100%;
  width: 100%;
}
.radar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  .ripple {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    animation: ripple 2s linear infinite;
  }
}
@keyframes ripple {
  to {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}
.radar :nth-child(1) {
  animation-delay: 0.666s;
}
.radar :nth-child(2) {
  animation-delay: 1.322s;
}
</style>